<template>
    <div class="HotList">
        <div class="Hot_item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
            <van-image class="img" width="110" radius="6" height="110" fit="cover"
                :src="`https://imagev2.xmcdn.com/${item.albumCoverPath}`" />

            <div class="title">{{ item.albumTitle }}</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { type albumsModel } from '@/api/index'
import { useRouter } from 'vue-router'
const Router = useRouter()
defineProps<{
    list: albumsModel[]
}>()
const toDetail = (item) => {
    Router.push(`/coursedetail?id=${item.albumId}&anchorId=${item.anchorId}&title=${item.albumTitle}`)
}

</script>

<style lang="less" scoped>
.HotList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .Hot_item {
        margin-bottom: 20px;
        width: 30%;
        display: flex;
        flex-direction: column;
        // img {
        //     width: 100rpx;
        //     height: 100rpx;
        // }

        .title {
            font-size: 28rpx;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
</style>